<template>
  <div class="c-bg-sgray">

    <div class="c-p">
      <div class="c-m-0auto c-bg-white c-flex-row c-pv30 c-flex-center c-br10">
        <div v-if="mainData.isTeacher != 1" class="c-flex-grow1 c-w0 c-textAlign-c c-flex-column c-aligni-center">
          <img class="c-ww64" src="../../../assets/i/wap/clockIn/icon_finish.png" alt="">
          <div class="c-fs24 c-fc-gray c-pv20">完成作业</div>
          <div class="c-fs36">{{mainData.finishNum}}</div>
        </div>
        <div class="c-flex-grow1 c-textAlign-c c-w0 c-flex-column c-aligni-center">
          <img class="c-ww64" src="../../../assets/i/wap/clockIn/icon_work.png" alt="">
          <div class="c-fs24 c-fc-gray c-pv20">作业总数</div>
          <div class="c-fs36">{{mainData.allWork}}</div>
        </div>
      </div>
    </div>
    <div>
      <my-small-tabbar class="c-flex-grow1" :tabList="tabList" :flexClass="'c-justify-sa'" :tabIndex="level" @changeTab="changeLevel"></my-small-tabbar>
    </div>

    <div class="c-ph24 c-pb20">
      <div @click="clickGoWork(item.hwId)" class="c-bg-white c-pt30 c-pb20 c-ph30 c-mt20 c-br8" v-for="(item,index) in homeWorkList" :key="index">
        <div class="c-bd-b1 c-flex-row c-aligni-center c-pb30">
          <div class="c-flex-grow1 c-w0">
            <div class="c-fs26 c-text-ellipsis2" :class="item.isExpire == 1 ? 'c-fc-gray':''">{{item.name}}</div>
            <div class="c-fs22 c-pt20 c-lh">
              <span class="c-fc-gray">题型：</span>
              <span :class="item.isExpire == 1 ? 'c-fc-gray':''">{{typeQueMap[item.type]}}</span>
            </div>
            <div v-if="mainData.isTeacher != 1" class="c-fs22 c-pt20 c-lh">
              <span class="c-fc-gray">状态：</span>
              <span :class="item.isStart == 0 ? 'c-fc-sgray' : item.status == 1 ? 'c-fc-green':'c-fc-sorange'">{{item.isStart == 0 ? '未开始' : item.status
                == 1 ? '已完成':'未完成'}}</span>
            </div>
            <div v-else class="c-fs20 c-pt20 c-lh">
              <span class="c-fc-gray">已提交：</span>
              <span class="c-fc-sorange">{{`${item.hasMan || 0}人`}}</span>
            </div>
          </div>
          <div class="c-flex-row c-flex-center c-pl20">
            <span class="iconfont c-fs34 c-fc-sgray">&#xe908;</span>
          </div>
        </div>
        <div class="c-flex-row c-aligni-center c-justify-sb c-fc-gray c-fs22 c-pt20">
          <div class="c-flex-row c-aligni-center">
            <i class="iconfont icon-shizhong c-fs20 c-mr12"></i>
            <span :class="item.isExpire == 1 ? 'c-fc-gray':''">{{item.startTime}} 至 {{item.endTime}}</span>
          </div>
          <span class="c-fc-sblack">{{item.hasMan}}人已完成</span>
        </div>
      </div>

      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无作业"></loading-status-tem>

    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
let pageIndex = 1;
let clockInId = "";
let sortType = 0;
let unFinished = 0;
export default {
  name: "HomeWorkList",
  components: {
    loadingStatusTem,
    MySmallTabbar
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      typeQueMap: {
        1: "简答题",
        2: "非简答题",
        3: "AI语音",
        4: "非简答题",
        5: "非简答题"
      },
      dataStatus: "HAS_MORE_DATA",
      mainData: {
        allWork: 0,
        finishNum: 0,
        noNum: 0,
        isTeacher: 0
      },
      homeWorkList: [],
      tabList: [],
      level: 0
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {},
  methods: {
    changeLevel(num) {
      this.level = num;
      pageIndex = 1;
      unFinished = num == 2 ? 1 : 0;
      if (num < 2) {
        sortType = num;
      }
      this.getHomeWorkList();
    },
    clickGoWork(hwId) {
      this.$routerGo(this, "push", {
        path: "/homePage/clockIn/stuHomeWork",
        query: {
          workType: 2,
          curId: hwId,
          clockInId: clockInId,
          fromDetail: this.$route.query.fromDetail || "",
          ckFrom: this.ckFrom || ""
        }
      });
    },
    getHomeWorkList() {
      if (this.dataStatus == "LOADING") {
        return;
      }
      this.dataStatus = "LOADING";
      utilJs.getMethod(
        global.apiurl +
          "signCard/homeworkList/" +
          clockInId +
          "?page=" +
          pageIndex +
          "&unFinished=" +
          unFinished +
          "&sortType=" +
          sortType,
        (res) => {
          if (res.isExist == 0) {
            this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: {
                from: "",
                info: "该打卡作业本已下架，请联系管理员！"
              }
            });
            return;
          }

          for (let item of res.detailData.data) {
            item.startTime = utilJs.changeTimeUtil(item.startTime);
            item.endTime = utilJs.changeTimeUtil(item.endTime);
          }

          if (pageIndex == 1) {
            this.mainData = res.mainData;
            this.homeWorkList = res.detailData.data;
            if (this.mainData.isTeacher != 1) {
              this.tabList = [
                {
                  title: "系统排序",
                  index: 0
                },
                {
                  title: "开始时间倒序",
                  index: 1
                },
                {
                  title: `未完成(${this.mainData.noNum})`,
                  index: 2
                }
              ];
            } else {
              this.tabList = [
                {
                  title: "系统排序",
                  index: 0
                },
                {
                  title: "开始时间倒序",
                  index: 1
                },
              ];
            }
          } else {
            this.homeWorkList = [...this.homeWorkList, ...res.detailData.data];
          }
          if (res.detailData.to * 1 == res.detailData.total * 1) {
            this.dataStatus =
              res.detailData.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
          } else {
            this.dataStatus = "HAS_MORE_DATA";
            pageIndex++;
          }
          // 打卡进度
          if (res.mainData.noNum == 0) {
            this.setProgress();
          }
        },
        (failRes) => {
          this.dataStatus = "DATA_ERROR";
        }
      );
    },
    setProgress: function () {
      let data = {
        ttId: this.ttId, //营期ID
        tpId: this.tpId, //环节ID
        tlId: this.tlId, //课时ID
        ratio: 100 //完成进度0-100
      };
      utilJs.postMethod(
        global.apiurl + "k12/trainings/progress",
        data,
        function (res) {}
      );
    },
    //分享
    wechatShare() {
      let title = window.localStorage.getItem("companyName");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShareInfo") ? JSON.parse(localStorage.getItem("homeWorkShareInfo")) : shareIndexData;
      utilJs.wechatConfig(
        shareData.shareUrl,
        shareData.title,
        shareData.shareImg,
        shareData.shareDesc,
        function () {},
        true
      );
    },
    //手机端分享
    appShare() {
      let title = window.localStorage.getItem("companyName");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShareInfo") ? JSON.parse(localStorage.getItem("homeWorkShareInfo")) : shareIndexData;
      utilJs.appShareTrue(
        shareData.title,
        shareData.shareImg,
        shareData.shareUrl,
        shareData.shareDesc
      );
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (
          this.dataStatus == "HAS_MORE_DATA" &&
          this.homeWorkList.length > 0
        ) {
          this.getHomeWorkList();
        }
      });
    }
  },
  activated() {
    setDocumentTitle("作业列表"); // eslint-disable-line
    pageIndex = 1;
    sortType = 0;
    unFinished = 0;
    this.level = 0;
    clockInId = this.$route.query.clockInId;
    this.ttId = this.$route.query.ttId || "";
    this.tpId = this.$route.query.tpId || "";
    this.tlId = this.$route.query.tlId || "";
    this.ckFrom = this.$route.query.ckFrom || "";
    this.dataStatus = "HAS_MORE_DATA";
    this.homeWorkList = [];
    this.getHomeWorkList();
    this.wechatShare();
    window.addEventListener("scroll", this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = "NO_MORE_DATA";
    window.removeEventListener("scroll", this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.box-br-r8 {
  border-bottom-right-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
}
</style>
